<template>
	<el-dialog
		width="1000px"
		:append-to-body="true"
		:close-on-click-modal="false"
		:visible.sync="isShow"
	>
		<!-- 弹窗头部 -->
		<template #title>
			<div class="title-box">
				<span class="title">关联章节目录</span>
				<span class="check-hint">
					已选
					<span class="theme_font_color number">{{ cacheData.length }}</span> 个
				</span>
			</div>
		</template>
		<!-- 弹窗内容 -->
		<el-form label-suffix=":" :inline="true">
			<el-form-item label="项目">{{ projectName }}</el-form-item>
			<el-form-item label="科目">
				<el-select v-model="selectedSubjectId">
					<el-option
						v-for="items in subjectList"
						:key="items.subjectId"
						:label="items.subjectName"
						:value="items.subjectId"
					/>
				</el-select>
			</el-form-item>
		</el-form>
		<div class="tree-box">
			<el-tree
				ref="tree"
				node-key="chapterId"
				:default-expand-all="true"
				:show-checkbox="true"
				:data="treeData"
				:default-checked-keys="checkedKeys"
				@check="checkChange"
				:props="{
					children: 'children',
					label: 'chapterTitle'
				}"
			/>
		</div>
		<!-- 弹窗底部 -->
		<template #footer>
			<el-button @click="isShow = false">取 消</el-button>
			<el-button type="primary" @click="onSubmit">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script src="./index.mjs"></script>

<style lang="less" scoped>
	.title-box {
		padding-left: 30px;

		.title {
			font-size: 16px;
			font-weight: bold;
			color: #3a3d4b;
		}

		.check-hint {
			margin-left: 30px;
			font-size: 16px;
			color: #7c808f;
		}

		.number {
			font-size: 20px;
			font-weight: bold;
		}
	}

	.tree-box {
		max-height: 400px;
		overflow: auto;
		/deep/ .el-tree-node__content {
			height: 54px;
			border-bottom: 1px solid #eee;
		}

		/deep/ .is-checked {
			background-color: #f9f9f9;
		}
	}
</style>
